<template>
  <div class="user-detail">
    <el-dialog
      :title="userDialog.title"
      :visible.sync="userDialog.show"
      :close-on-click-modal="false"
      width="800px"
    >
      <el-form
        ref="userForm"
        :model="userDialog.form"
        :rules="rules"
        label-width="95px"
        label-position="left"
      >
        <div class="user-form lin-flex lin-flex-v-top">
          <div style="width: 50%; padding: 0 10px">
            <el-form-item :label="$t('user.name')">
              <el-input v-model="userDialog.form.Name" />
            </el-form-item>
            <el-form-item :label="$t('user.username')">
              <el-input v-model="userDialog.form.Username" />
            </el-form-item>
            <el-form-item :label="$t('user.password')" prop="Password">
              <el-input v-model="userDialog.form.Password" type="password" autocomplete="off" />
            </el-form-item>
            <el-form-item :label="$t('user.confirmPass')" prop="checkPass">
              <el-input v-model="userDialog.form.checkPass" type="password" autocomplete="off" />
            </el-form-item>
          </div>
          <div style="width: 50%; padding: 0 10px">
            <el-form-item :label="$t('user.email')">
              <el-input v-model="userDialog.form.Email" />
            </el-form-item>
            <el-form-item :label="$t('user.dept')">
              <el-select v-model="userDialog.form.DeptIdList" multiple class="full-width">
                <el-option v-for="dept in deptList" :key="dept.Id" :label="dept.Title" :value="dept.Id" />
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('user.role')">
              <el-select v-model="userDialog.form.RoleIdList" multiple class="full-width">
                <el-option v-for="role in roleList" :key="role.Id" :value="role.Id" :label="role.Title" />
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('user.status')">
              <el-radio-group v-model="userDialog.form.Status">
                <el-radio-button label="Show">{{ $t('user.show') }}</el-radio-button>
                <el-radio-button label="Hide">{{ $t('user.hide') }}</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer">
        <el-button plain @click="userDialog.show = false">{{ $t('user.cancel') }}</el-button>
        <el-button
          type="primary"
          :disabled="userDialog.loading"
          :loading="userDialog.loading"
          @click="onConfirmUser"
        >
          {{ $t('user.submit') }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { createUser, updateUser, updateUserPassword } from '@/api/user'
import { fetchRoleList } from '@/api/role'
import { fetchDeptList } from '@/api/dept'

export default {
  name: 'UserDetail',
  props: {
    value: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.userDialog.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.userDialog.form.Password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      userDialog: {
        show: false,
        title: '',
        form: null
      },
      rules: {
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      },
      roleList: [],
      deptList: []
    }
  },
  watch: {
    value: {
      handler(val) {
        this.userDialog = val
      },
      deep: true,
      immediate: true
    },
    userDialog: {
      handler(val) {
        this.$emit('input', val)
        this.$emit('on-change', val)
      },
      deep: true
    }
  },
  created() {
    this.fetchRoleList()
    this.fetchDeptList()
  },
  methods: {
    async fetchDeptList() {
      const data = await fetchDeptList()
      this.deptList = data.Data
    },
    async fetchRoleList() {
      const data = await fetchRoleList()
      this.roleList = data.Data
    },
    onConfirmUser() {
      this.$refs['userForm'].validate(async(valid) => {
        if (valid) {
          try {
            this.$set(this.userDialog, 'loading', true)
            const data = this.userDialog.status === 'add'
              ? await createUser(this.userDialog.form)
              : this.userDialog.form.Password ? await updateUserPassword(
                this.userDialog.form) : await updateUser(this.userDialog.form)
            if (data.Message === 'ok') {
              this.$notify({
                title: this.$t('user.success'),
                message: this.userDialog.status === 'add' ? this.$t('user.addSuccessAlert') : this.$t(
                  'user.editSuccessAlert'),
                type: 'success',
                duration: 2000
              })
              this.$set(this.userDialog, 'show', false)
              this.$emit('refresh-list')
            }
          } catch (e) {
            console.log(e)
          } finally {
            this.$set(this.userDialog, 'loading', false)
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
